{extends file="admin/base2.html"}
{block name="content"}
        <div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>会员管理</cite></a>
              <a><cite>添加会员</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
        </div>
        <div class="x-body">
            <form class="layui-form" action="#">
                <div class="layui-form-item">
                    <label for="L_username" class="layui-form-label">
                        <span class="x-red">*</span>用户名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_username" name="username" required="" lay-verify="username"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_username" class="layui-form-label">
                        <span class="x-red"></span>真实姓名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_username" name="name"  class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="L_pass" class="layui-form-label">
                        <span class="x-red">*</span>密码
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" id="L_pass" name="pass" required="" lay-verify="pass"
                        autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        6到16个字符
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                        <span class="x-red">*</span>确认密码
                    </label>
                    <div class="layui-input-inline">
                        <input type="password" id="L_repass" name="repass" required="" lay-verify="repass"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_email" class="layui-form-label">
                        <span class="x-red"></span>性别
                    </label>
                    <div class="layui-input-inline">
                        <input type="radio" name="sex" value="1" title="男" checked>
                        <input type="radio" name="sex" value="0" title="女" >
                    </div>
                </div>
              <!--   
                 <div>
    <select id="s_province" name="s_province"></select>  
    <select id="s_city" name="s_city" ></select>  
    <select id="s_county" name="s_county"></select>
    <script class="resources library" src="area.js" type="text/javascript"></script>
    
    <script type="text/javascript">_init_area();</script>
    </div>
    <div id="show"></div> -->
                    <!-- <label class="layui-form-label">地址</label> -->
                <div class="layui-form-item">
                    <label class="layui-form-label">选择地区</label>
                    <div class="layui-input-inline">
                        <select name="province" lay-filter="province">
                            <option value="">请选择省</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="display: none;">
                        <select name="city" lay-filter="city">
                            <option value="">请选择市</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="display: none;">
                        <select name="area" lay-filter="area">
                            <option value="">请选择县/区</option>
                        </select>
                    </div>
                </div>
           
                <div class="layui-form-item">
                    <label for="L_email" class="layui-form-label">
                        <span class="x-red"></span>邮编
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_email" name="code" 
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_email" class="layui-form-label">
                        <span class="x-red"></span>电话
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_email" name="phone"lay-verify="phone"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_email" class="layui-form-label">
                        <span class="x-red">*</span>邮箱
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_email" name="email" required="" lay-verify="email"
                        autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>请输入正确的邮箱格式
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button  class="layui-btn" lay-filter="add" lay-submit="">
                        增加
                    </button>
                </div>
            </form>
        </div>
{/block}
{block name="js"}
    {literal}
        <script src="./area.js"></script>
        <!-- <script type="text/javascript">_init_area();</script> -->
        <script>
     
            
            layui.use(['form','layer'], function(){
                $ = layui.jquery;
                var form = layui.form()
                 ,layer = layui.layer;
                 $form = $('form');
                loadProvince();
                
              //自定义验证规则              
              form.verify({
                  username: function(value){
                    if(value.length < 5){
                    return '昵称至少得5个字符啊';
                    }
                    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                      return '用户名不能有特殊字符';
                    }
                    if(/(^\_)|(\__)|(\_+$)/.test(value)){
                      return '用户名首尾不能出现下划线\'_\'';
                    }
                    if(/^\d+\d+\d$/.test(value)){
                      return '用户名不能全为数字';
                    }
                  }

                  ,pass: [/(.+){6,12}$/, '密码必须6到12位']
                  ,repass: function(value){
                    if($('#L_pass').val()!=$('#L_repass').val()){
                        return '两次密码不一致';
                    }
                    }
                  ,phone:function(value){
                    if (value>0) {
                        if (!new RegExp("^1[34578]\d{9}$").test(value)) {
                        return "手机号码有误，请重填";
                        }
                    }
                  }
                  ,email:function(value){
                    if (value.length<1) {
                        return "邮箱不能为空";
                    }
                    if (!new RegExp("^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$").test(value)) {
                        return "邮箱格式不正确";
                    }
                  }
                   
                });      
              //监听提交
              // form.on('submit(add)', function(data){
              //   console.log(data);
              //   //发异步，把数据提交给php
              //   layer.alert("增加成功", {icon: 6},function () {
              //       // 获得frame索引
              //       var index = parent.layer.getFrameIndex(window.name);
              //       //关闭当前frame
              //       parent.layer.close(index);
              //   });
              //   return false;
              // });
              
              
            });
            var areaData = Area;
            //加载省数据
            function loadProvince() {
                var proHtml = '';
                for(var i = 0; i < areaData.length; i++) {
                    proHtml += '<option value="' + areaData[i].provinceCode + '_' + areaData[i].mallCityList.length + '_' + i + '">' +
                        areaData[i].provinceName + '</option>';
                }
                //初始化省数据
                $form.find('select[name=province]').append(proHtml);
                form.render();
                form.on('select(province)', function(data) {
                    $form.find('select[name=area]').html('<option value="">请选择县/区</option>').parent().hide();
                    var value = data.value;
                    var d = value.split('_');
                    var code = d[0];
                    var count = d[1];
                    var index = d[2];
                    if(count > 0) {
                        loadCity(areaData[index].mallCityList);
                    } else {
                        $form.find('select[name=city]').parent().hide();
                    }
                });
            }

            function loadCity(citys) {
                var cityHtml = '';
                for(var i = 0; i < citys.length; i++) {
                    cityHtml += '<option value="' + citys[i].cityCode + '_' + citys[i].mallAreaList.length + '_' + i + '">' +
                        citys[i].cityName + '</option>';
                }
                $form.find('select[name=city]').html(cityHtml).parent().show();
                form.render();
                form.on('select(city)', function(data) {
                    var value = data.value;
                    var d = value.split('_');
                    var code = d[0];
                    var count = d[1];
                    var index = d[2];
                    if(count > 0) {
                        loadArea(citys[index].mallAreaList);
                    } else {
                        $form.find('select[name=area]').parent().hide();
                    }
                });
            }

            function loadArea(areas) {
                var areaHtml = '';
                for(var i = 0; i < areas.length; i++) {
                    areaHtml += '<option value="' + areas[i].areaCode + '">' +
                        areas[i].areaName + '</option>';
                }
                $form.find('select[name=area]').html(areaHtml).parent().show();
                form.render();
                form.on('select(area)', function(data) {
                    //console.log(data);
                });
            }
        </script>
      {/literal}
{/block}